<template>
  <div>
    <div class="t4_r_top t4_border" style="height: auto">
      <div class="t4_r_sjCons">
        <!-- 目录列表 -->
        <div class="t4_sjCons" style="display: block">
          <div class="t2_sjCons_list t2_result_list_r2">
            <h2 class="titBox">
              <a
                ><img
                  src="@/assets/images/share.png"
                  style="padding: 0 8px; height: 24px"
                />{{ dataInfo.name }}</a
              >
              <div class="sqBtn">
                <el-button plain size="small">申&nbsp;请111</el-button>
              </div>
            </h2>
            <div class="zyInfoBox">
              <div class="zyInfo">
                <div>资源分类：{{ dataInfo.catalogName }}</div>
                <div class="infoItem_box">
                  <div class="infoItem">
                    <div>资源提供方：{{ dataInfo.institutionName }}</div>
                    <div>
                      共享类型：{{ initInfo(dataInfo.shareType, "shareType") }}
                    </div>
                  </div>
                  <div class="infoItem">
                    <div>创建时间：{{ dataInfo.createTime }}</div>
                    <div>
                      共享条件：{{
                        dataInfo.shareCondition ? dataInfo.shareCondition : "无"
                      }}
                    </div>
                  </div>
                  <div class="infoItem">
                    <div>更新日期：{{ dataInfo.updateTime }}</div>
                    <div>
                      更新周期：{{
                        initInfo(dataInfo.updateCycle, "updateCycle")
                      }}
                    </div>
                    <!--                            <div>共享方式：<span class="gxfs" v-html="initInfo(item.shareMethod,'ShareMode')"></span></div>-->
                  </div>
                  <div class="infoItem">
                    <div>资源类型：{{ resTpye }}</div>
                    <div>
                      共享方式：
                      <div
                        class="imgBox"
                        v-for="(param, index) in initInfo(
                          dataInfo.shareMethod,
                          'ShareMode'
                        )"
                        :key="index"
                      >
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="param.name"
                          placement="top"
                        >
                          <img
                            :class="param.code == 0 ? 'sqlImg' : ''"
                            :src="param.src"
                            alt=""
                          />
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 目录列表 end -->
      </div>
    </div>
    <div class="tabsBox">
      <el-tabs v-model="activeInfo" @tab-click="infoHandleClick">
        <el-tab-pane label="信息项信息" name="info">
          <el-table :data="infoItemData" border style="width: 100%">
            <el-table-column
              show-overflow-tooltip
              prop="name"
              label="信息项名称"
              width="180"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="enName"
              label="信息项英文名"
            >
            </el-table-column>
            <el-table-column prop="type" label="数据类型" width="100">
            </el-table-column>
            <el-table-column prop="length" label="数据长度"> </el-table-column>
            <el-table-column prop="address" label="信息项描述">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="表信息预览" name="second">
          <el-table :data="[]" style="min-height: 400px"></el-table>
        </el-tab-pane>
        <el-tab-pane label="API服务" name="api">
          <el-table :data="[]" style="min-height: 400px"></el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getResInfo, getUpdateCycle } from "../../utils/httpUtils";
import sqlImg from "@/assets/images/sql.png";
import apiImg from "@/assets/images/APIserve.png";
import fileImg from "@/assets/images/file.png";

export default {
  name: "dataInfo",
  props: ["updateCycleList", "shareTypeList", "ShareModeList", "resTpye"],
  data() {
    return {
      activeInfo: "info",
      dataInfo: {},
      code: "",
      name: "",
      infoItemData: [],
      resTypeList: [
        {
          code: 0,
          name: "数据资源",
        },
        {
          code: 1,
          name: "服务资源",
        },
      ],
    };
  },
  mounted() {
    this.$bus.$on("busInfo", (data) => {
      this.activeInfo = "info";
      this.code = data;
      this.$nextTick(() => {
        this.getDataInfo();
      });
    });
  },
  destroyed() {
    this.$bus.$off("busInfo");
  },
  methods: {
    infoHandleClick() {},
    getTypeList() {
      //获取更新频率字段
      getUpdateCycle("updateCycle").then((res) => {
        if (res) {
          this.updateCycleList = res.data;
        }
      });
      // 获取共享类型字段
      getUpdateCycle("shareType").then((res) => {
        if (res) {
          this.shareTypeList = res.data;
        }
      });
      // 获取共享方式字段
      getUpdateCycle("ShareMode").then((res) => {
        if (res) {
          this.ShareModeList = res.data;
        }
      });
    },
    // 获取列表数据
    getDataInfo() {
      let param = {
        code: this.code,
      };
      getResInfo(param).then((res) => {
        if (res.data) {
          this.dataInfo = JSON.parse(res.data.vo);
          this.infoItemData = JSON.parse(this.dataInfo.attr);
        }
      });
    },
    // 格式化数据
    initInfo(val, type) {
      if (val && type === "updateCycle") {
        let isHas = this.updateCycleList.find((item) => {
          return item.code == val;
        });
        if (isHas) {
          return isHas.name;
        }
      } else if (val === 0 || (val && type === "shareType")) {
        let isHas = this.shareTypeList.find((item) => {
          return item.code == val;
        });
        if (isHas) {
          return isHas.name;
        }
      } else if (val && type === "resourceType") {
        let isHas = this.resTypeList.find((item) => {
          return item.code == val;
        });
        if (isHas) {
          return isHas.name;
        }
      } else if (val && type === "ShareMode") {
        let arr = val.split(",");
        let arrTemp = [];
        for (let i = 0; i < arr.length; i++) {
          let isHas = this.ShareModeList.find((item) => {
            return item.code == arr[i];
          });
          if (isHas) {
            arrTemp.push({
              code: isHas.code,
              name: isHas.name,
              src:
                isHas.code == 0
                  ? sqlImg
                  : isHas.code == 1
                  ? fileImg
                  : isHas.code == 2
                  ? apiImg
                  : "",
            });
          }
        }
        return arrTemp;
      }
    },
  },
};
</script>

<style scoped>
.t4_qb {
  width: 70px;
  padding: 5px;
  background: #198ef8;
  float: left;
  text-align: center;
  cursor: pointer;
}
.t4_qb a {
  color: #fff;
}
.t4_border {
  border-left: none;
  border-right: none;
}
.t4_sjCons .t2_sjCons_list {
  border-bottom: none;
}
.t4_search ul li:hover {
  background: rgba(255, 255, 255, 0.1);
}
.lTop-box {
  padding: 0 0 15px;
  background-color: #f7f8fa;
}
.lTop-box .proList {
  padding: 15px 30px;
  background-color: #fff;
  border-bottom: 4px solid #198ef8;
  display: flex;
  flex-direction: row;
}
.lTop-box .proList .tit {
  width: 85px;
  padding: 5px 0;
}
.lTop-box .proList ul {
  flex: 1;
  padding: 0;
  margin: 0;
}
.lTop-box .proList ul li {
  float: left;
  text-align: center;
  padding: 5px 10px;
  height: 30px;
  width: 18.5%;
  margin: 0 5px;
  background-color: #f8f8f8;
  cursor: pointer;
}
.lTop-box .proList ul li.proAct {
  background-color: #f1f8ff;
  color: #204dac;
}
.listToggle {
  padding: 13px 20px;
}
.listToggle span {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}
#pageDiv {
  text-align: center;
  padding: 20px;
}
#pageDiv /deep/ .el-select__caret {
  width: auto;
  height: auto;
}
#pageDiv /deep/ .el-pagination__jump {
  color: #606266;
  margin: 0;
}
.gxfs img {
  width: 20px;
}
.zyInfoBox {
  display: flex;
  flex-direction: row;
}
.zyInfoBox .zyInfo {
  flex: 1;
  margin-left: 8px;
  font-size: 13px;
}
.zyInfoBox .zyInfo .infoItem_box {
  display: flex;
  flex-direction: row;
}
.zyInfoBox .zyInfo .infoItem_box .infoItem {
  flex: 1;
}
.zyInfoBox .zyInfo .infoItem_box .infoItem > div {
  margin-top: 8px;
}
.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox,
.el-table .imgBox {
  display: inline-block;
  margin-right: 5px;
}
.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img.sqlImg,
.el-table .imgBox img.sqlImg {
  width: 18px;
}
.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img,
.el-table .imgBox img {
  width: 22px;
}
.tabsBox {
  padding: 15px 10px;
}
h2.titBox {
  position: relative;
}
h2.titBox .sqBtn {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
